<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title th:text="${product.id != null ? '编辑商品' : '添加商品'} + ' - 商品管理系统'">商品表单 - 商品管理系统</title>
    
    <!-- Bootstrap CSS -->
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container">
            <a class="navbar-brand" th:href="@{/products}">
                <i class="fas fa-store me-2"></i>商品管理系统
            </a>
            
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav me-auto">
                    <li class="nav-item">
                        <a class="nav-link" th:href="@{/products}">
                            <i class="fas fa-list me-1"></i>商品列表
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" th:href="@{/products/new}">
                            <i class="fas fa-plus me-1"></i>添加商品
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- 主要内容区域 -->
    <main class="container mt-4">
        <!-- 面包屑导航 -->
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a th:href="@{/products}">商品列表</a></li>
                <li class="breadcrumb-item active" 
                    th:text="${product.id != null ? '编辑商品' : '添加商品'}">
                    商品表单
                </li>
            </ol>
        </nav>

        <!-- 页面标题 -->
        <div class="d-flex justify-content-between align-items-center mb-4">
            <h1 class="h3">
                <i th:class="${product.id != null ? 'fas fa-edit' : 'fas fa-plus'}" class="me-2"></i>
                <span th:text="${product.id != null ? '编辑商品' : '添加商品'}">商品表单</span>
            </h1>
            <a th:href="@{/products}" class="btn btn-outline-secondary">
                <i class="fas fa-arrow-left me-1"></i>返回列表
            </a>
        </div>

        <!-- 表单 -->
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header">
                        <h5 class="card-title mb-0">
                            <i class="fas fa-edit me-2"></i>商品信息
                        </h5>
                    </div>
                    <div class="card-body">
                        <form th:action="@{/products}" th:object="${product}" method="post">
                            <!-- 隐藏字段保存ID -->
                            <input type="hidden" th:field="*{id}">
                            
                            <div class="row">
                                <!-- 商品名称 -->
                                <div class="col-md-6 mb-3">
                                    <label for="name" class="form-label">
                                        <i class="fas fa-tag me-1"></i>商品名称 <span class="text-danger">*</span>
                                    </label>
                                    <input type="text" 
                                           class="form-control" 
                                           id="name" 
                                           th:field="*{name}"
                                           placeholder="请输入商品名称"
                                           required>
                                    <div class="form-text">请输入商品的名称</div>
                                </div>

                                <!-- 价格 -->
                                <div class="col-md-6 mb-3">
                                    <label for="originalPrice" class="form-label">
                                        <i class="fas fa-dollar-sign me-1"></i>价格 <span class="text-danger">*</span>
                                    </label>
                                    <div class="input-group">
                                        <span class="input-group-text">¥</span>
                                        <input type="number" 
                                               class="form-control" 
                                               id="originalPrice" 
                                               th:field="*{originalPrice}"
                                               placeholder="0"
                                               min="0"
                                               step="0.01"
                                               required>
                                    </div>
                                    <div class="form-text">请输入商品价格（分）</div>
                                </div>

                                <!-- 产地 -->
                                <div class="col-md-6 mb-3">
                                    <label for="originPlace" class="form-label">
                                        <i class="fas fa-map-marker-alt me-1"></i>产地
                                    </label>
                                    <input type="text" 
                                           class="form-control" 
                                           id="originPlace" 
                                           th:field="*{originPlace}"
                                           placeholder="请输入产地">
                                    <div class="form-text">请输入商品产地</div>
                                </div>

                                <!-- 分类ID -->
                                <div class="col-md-6 mb-3">
                                    <label for="categoryId" class="form-label">
                                        <i class="fas fa-th-large me-1"></i>分类ID
                                    </label>
                                    <input type="number" 
                                           class="form-control" 
                                           id="categoryId" 
                                           th:field="*{categoryId}"
                                           placeholder="0"
                                           min="1">
                                    <div class="form-text">请输入商品分类ID</div>
                                </div>

                                <!-- 店铺ID -->
                                <div class="col-md-6 mb-3">
                                    <label for="shopId" class="form-label">
                                        <i class="fas fa-store me-1"></i>店铺ID
                                    </label>
                                    <input type="number" 
                                           class="form-control" 
                                           id="shopId" 
                                           th:field="*{shopId}"
                                           placeholder="0"
                                           min="1">
                                    <div class="form-text">请输入店铺ID</div>
                                </div>

                                <!-- 产品ID -->
                                <div class="col-md-6 mb-3">
                                    <label for="productId" class="form-label">
                                        <i class="fas fa-barcode me-1"></i>产品ID
                                    </label>
                                    <input type="number" 
                                           class="form-control" 
                                           id="productId" 
                                           th:field="*{productId}"
                                           placeholder="0"
                                           min="1">
                                    <div class="form-text">请输入产品ID</div>
                                </div>
                            </div>

                            <!-- 表单按钮 -->
                            <div class="d-flex justify-content-end gap-2 mt-4">
                                <a th:href="@{/products}" class="btn btn-secondary">
                                    <i class="fas fa-times me-1"></i>取消
                                </a>
                                <button type="submit" class="btn btn-primary">
                                    <i class="fas fa-save me-1"></i>
                                    <span th:text="${product.id != null ? '更新商品' : '创建商品'}">保存</span>
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

                <!-- 帮助信息 -->
                <div class="card mt-3">
                    <div class="card-header">
                        <h6 class="card-title mb-0">
                            <i class="fas fa-info-circle me-2"></i>填写说明
                        </h6>
                    </div>
                    <div class="card-body">
                        <ul class="mb-0">
                            <li><strong>商品名称</strong>：必填，用于标识商品的名称</li>
                            <li><strong>价格</strong>：必填，单位为分，例如100表示1元</li>
                            <li><strong>产地</strong>：可选，商品的生产地或来源地</li>
                            <li><strong>分类ID</strong>：可选，商品所属的分类标识</li>
                            <li><strong>店铺ID</strong>：可选，商品所属的店铺标识</li>
                            <li><strong>产品ID</strong>：可选，产品的唯一标识</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // 表单验证
        (function() {
            'use strict';
            
            // 获取表单元素
            const forms = document.querySelectorAll('.needs-validation');
            
            // 阻止表单提交并验证
            Array.prototype.slice.call(forms).forEach(function(form) {
                form.addEventListener('submit', function(event) {
                    if (!form.checkValidity()) {
                        event.preventDefault();
                        event.stopPropagation();
                    }
                    form.classList.add('was-validated');
                }, false);
            });
        })();
    </script>
</body>
</html>
